<template>
  <div class="blog">
    <!-- 页面头部 -->
    <section class="blog__header section">
      <div class="container">
        <h1 class="section-title">博客文章</h1>
        <p class="blog__intro">
          记录技术学习、项目经验和生活感悟
        </p>
      </div>
    </section>
    
    <!-- 统计卡片 -->
    <section class="blog__stats section">
      <div class="container">
        <div class="stats-grid">
          <StatCard
            :icon="Document"
            icon-bg="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
            :value="totalArticles"
            label="文章总数"
            suffix="篇"
          />
          <StatCard
            :icon="View"
            icon-bg="linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
            :value="totalViews"
            label="总阅读量"
          />
          <StatCard
            :icon="ChatDotRound"
            icon-bg="linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
            :value="totalComments"
            label="总评论数"
          />
          <StatCard
            :icon="Calendar"
            icon-bg="linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
            :value="daysActive"
            label="活跃天数"
            suffix="天"
          />
        </div>
      </div>
    </section>
    
    <!-- 文章筛选 -->
    <section class="blog__filter section">
      <div class="container">
        <ElRadioGroup v-model="currentCategory" size="large">
          <ElRadioButton
            v-for="category in categories"
            :key="category.value"
            :label="category.value"
          >
            {{ category.label }}
          </ElRadioButton>
        </ElRadioGroup>
      </div>
    </section>
    
    <!-- 搜索框 -->
    <section class="blog__search section">
      <div class="container">
        <SearchBox
          v-model="searchKeyword"
          placeholder="搜索文章标题或标签..."
          size="large"
          :suggestion-list="searchSuggestions"
          :show-suggestions="true"
          @search="handleSearch"
        />
      </div>
    </section>
    
    <!-- 文章列表 -->
    <section class="blog__list section">
      <div class="container">
        <TransitionGroup name="list" tag="div" class="articles-grid">
          <BlogCard
            v-for="article in paginatedArticles"
            :key="article.id"
            :article="article"
          />
        </TransitionGroup>
        
        <!-- 空状态 -->
        <ElEmpty
          v-if="filteredArticles.length === 0"
          description="暂无文章"
        />
        
        <!-- 分页 -->
        <div v-if="filteredArticles.length > 0" class="pagination">
          <ElPagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[6, 9, 12, 18]"
            :total="filteredArticles.length"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Document, View, ChatDotRound, Calendar } from '@element-plus/icons-vue'
import BlogCard from '@/components/common/BlogCard.vue'
import StatCard from '@/components/common/StatCard.vue'
import SearchBox from '@/components/common/SearchBox.vue'
import { blogArticles, blogCategories } from '@/data/blog.js'

const currentCategory = ref('all')
const categories = blogCategories
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(6)

// 搜索建议
const searchSuggestions = computed(() => {
  const titles = blogArticles.map(a => a.title)
  const tags = [...new Set(blogArticles.flatMap(a => a.tags))]
  return [...titles, ...tags]
})

// 筛选后的文章（分类 + 搜索）
const filteredArticles = computed(() => {
  let articles = blogArticles
  
  // 分类筛选
  if (currentCategory.value !== 'all') {
    articles = articles.filter(article => article.category === currentCategory.value)
  }
  
  // 搜索筛选
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    articles = articles.filter(article => {
      return article.title.toLowerCase().includes(keyword) ||
             article.tags.some(tag => tag.toLowerCase().includes(keyword)) ||
             article.summary.toLowerCase().includes(keyword)
    })
  }
  
  return articles
})

// 分页后的文章
const paginatedArticles = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredArticles.value.slice(start, end)
})

// 统计数据
const totalArticles = computed(() => blogArticles.length)
const totalViews = computed(() => blogArticles.reduce((sum, article) => sum + (article.views || 0), 0))
const totalComments = computed(() => blogArticles.reduce((sum, article) => sum + (article.comments || 0), 0))
const daysActive = ref(365)

// 搜索处理
const handleSearch = (keyword) => {
  searchKeyword.value = keyword
  currentPage.value = 1 // 重置到第一页
}

// 分页处理
const handlePageChange = (page) => {
  currentPage.value = page
  // 滚动到顶部
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

// 监听分类变化，重置页码
watch(currentCategory, () => {
  currentPage.value = 1
})
</script>

<style lang="scss" scoped>
.blog {
  &__header {
    text-align: center;
  }
  
  &__intro {
    max-width: 800px;
    margin: 0 auto;
    font-size: $font-size-lg;
    color: var(--text-secondary);
    line-height: 1.8;
  }
  
  &__stats {
    background: var(--bg-secondary);
  }
  
  &__filter {
    text-align: center;
  }
  
  &__search {
    .container {
      max-width: 800px;
    }
  }
}

.pagination {
  margin-top: $spacing-2xl;
  display: flex;
  justify-content: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: $spacing-lg;
  
  @include respond-to('sm') {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @include respond-to('lg') {
    grid-template-columns: repeat(4, 1fr);
  }
}

.articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: $spacing-xl;
  
  @include respond-to('md') {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @include respond-to('lg') {
    grid-template-columns: repeat(3, 1fr);
  }
}

// 列表动画
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.list-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

.list-move {
  transition: transform 0.5s ease;
}
</style>

